<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Test</title>
<link rel="stylesheet" href="../../build/cssbase/base-min.css"/>
<style>
    .ks-ext-position {
        position: absolute;
    }

    .ks-ext-mask {
        background-color: #000;
        opacity: 0.3;
        filter: alpha(opacity = 15);
    }
</style>
</head>
<body>

<button id="show1">
    点击出现弹窗1
</button>

<button id="destroy1">
    点击摧毁弹窗1
</button>

<div id="show3" style="margin:10px;border:1px solid red;width:100px;padding:50px;">
    鼠标掠过出现
</div>

<div id="markup" style="visibility:hidden;">
        从 markup 生成 overlay
</div>

<select>
    <option>测试 ie6</option>
</select>


<button id="show2">
    show from markup
</button>

<button id="hide2">
    hide from markup
</button>
<script src="../../build/kissy.js"></script>
<script src="../uibase/uibase.js"></script>
<script src="../uibase/uibase-box.js"></script>
<script src="../uibase/uibase-contentbox.js"></script>
<script src="../uibase/uibase-position.js"></script>
<script src="../uibase/uibase-loading.js"></script>
<script src="../uibase/uibase-shim.js"></script>
<script src="../uibase/uibase-align.js"></script>
<script src="../uibase/uibase-mask.js"></script>
<script src="overlay.js"></script>
<script>
    KISSY.ready(function(S) {
        var Overlay = S.Overlay,show1 = S.one("#show1");
        var show3 = S.one("#show3"),
                Align = S.UIBase.Align;

        var o = new Overlay({
            content:"i am overly 动态生成,esc 隐藏",
            width:200,
            //x:100,
            //y:100,
            align:{
                // 参考元素, falsy 值为可视区域
                node: null,
                // ['tr', 'tl'] 表示 overlay 的 tl 与参考节点的 tr 对齐
                points: [Align.CC, Align.CC],
                // 有效值为 [n, m]
                offset: [0, 0]
            },
            mask:true,
            elStyle:{
                //position:"absolute",
                border:"1px solid red"
            }
        });

        show1.on("click", function() {
            o.show();
        });
        S.one("#destroy1").on("click", function() {
            o.destroy();
        });


        var o3 = new Overlay({
            content:"i am overly 动态生成 2",
            width:"200px",
            elStyle:{
                //position:"absolute",
                border:"1px solid green"
            }
        });


        show3.on("mouseenter", function() {
            S.log("mouseenter");
            o3.show();
            //o3.align(show3, [Align.TR,Align.TL], [0,0]);'
            //overlay的左上角与参考点的右上角对齐
            o3.set("align", {node:show3, points:[Align.TR,Align.TL],offset:[0,0]});
        });
        show3.on("mouseleave", function() {
            S.log("mouseleave");
            o3.hide();
        });

        var o2 = new Overlay({
            srcNode:S.one("#markup"),
            autoRender:true,
            x:100,
            y:100,
            elStyle:{
                //position:"absolute",
                border:"1px solid black"
            }
        });


        S.one("#show2").on("click", function() {
            o2.show();
        });

        S.one("#hide2").on("click", function() {
            o2.hide();
        });
        
    });
</script>
</body>
</html>
